<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div class="h-100">
    <div class="box">
        <div
            class="assemblyOptions sp-blue-bg m-0 row header h-40"
            *ngIf="editMode && headerVisible"
        >
            <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
                <button
                    mat-icon-button
                    color="white"
                    (click)="editWidget()"
                    data-cy="widget-settings-button"
                >
                    <i class="material-icons">settings</i>
                </button>
                <button
                    mat-icon-button
                    color="white"
                    (click)="removeWidget()"
                    data-cy="widget-remove-button"
                >
                    <i class="material-icons">clear</i>
                </button>
            </div>
        </div>
        <div class="h-100 p-0 row content">
            <div
                *ngIf="widgetLoaded && widgetNotAvailable"
                class="h-100 pipeline-not-running"
                fxFlex="100"
                fxLayout="column"
                fxLayoutAlign="center center"
            >
                <i class="material-icons disconnect-icon">block</i>
                <h5 class="text-center">
                    Widget not found, did you modify the pipeline?
                </h5>
                <button
                    mat-button
                    mat-raised-button
                    color="accent"
                    (click)="modifyWidget()"
                >
                    <span>Modify widget</span>
                </button>
            </div>
            <div
                *ngIf="widgetLoaded && !widgetNotAvailable && !pipelineRunning"
                class="h-100 pipeline-not-running"
                fxFlex="100"
                fxLayout="column"
                fxLayoutAlign="center center"
            >
                <i class="material-icons disconnect-icon">link_off</i>
                <h5 class="text-center">
                    Pipeline <i>{{ pipeline.name }}</i> is not running, did you
                    start the pipeline?
                </h5>
                <button
                    mat-button
                    mat-raised-button
                    color="accent"
                    (click)="startPipeline()"
                >
                    <span>Start pipeline</span>
                </button>
            </div>
            <div *ngIf="widgetLoaded && pipelineRunning" class="h-100">
                <div
                    *ngIf="configuredWidget.widgetType === 'number'"
                    class="h-100 p-0"
                >
                    <sp-number-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-number-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'line'"
                    class="h-100 p-0"
                >
                    <sp-line-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-line-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'area'"
                    class="h-100 p-0"
                >
                    <sp-area-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-area-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'table'"
                    class="h-100 p-0"
                >
                    <sp-table-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-table-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'gauge'"
                    class="h-100 p-0"
                >
                    <sp-gauge-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-gauge-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'image'"
                    class="h-100 p-0"
                >
                    <sp-image-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-image-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'map'"
                    class="h-100 p-0"
                >
                    <sp-map-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-map-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'raw'"
                    class="h-100 p-0"
                >
                    <sp-raw-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-raw-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'html'"
                    class="h-100 p-0"
                >
                    <sp-html-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-html-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'trafficlight'"
                    class="h-100 p-0"
                >
                    <sp-traffic-light-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-traffic-light-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'wordcloud'"
                    class="h-100 p-0"
                >
                    <sp-wordcloud-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-wordcloud-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'status'"
                    class="h-100 p-0"
                >
                    <sp-dashboard-status-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-dashboard-status-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'bar-race'"
                    class="h-100 p-0"
                >
                    <sp-bar-race-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-bar-race-widget>
                </div>
                <div
                    *ngIf="configuredWidget.widgetType === 'stacked-line-chart'"
                    class="h-100 p-0"
                >
                    <sp-stacked-line-chart-widget
                        [itemWidth]="itemWidth"
                        #activeWidget
                        [itemHeight]="itemHeight"
                        [editMode]="editMode"
                        [globalRefresh]="globalRefresh"
                        [gridsterItemComponent]="gridsterItemComponent"
                        [widgetConfig]="configuredWidget"
                        [widgetDataConfig]="widgetDataConfig"
                        class="h-100"
                    ></sp-stacked-line-chart-widget>
                </div>
            </div>
        </div>
    </div>
</div>
